<template>
  <div class="zn-wrapper">
    <!-- 输入和选择字段 -->
    <div class="zn-wrapper-top">
      <el-row type="flex" justify="space-between">
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">控制器路径</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.controllerOutputDir" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">模块名</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.module" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">基本路径</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.outputDir" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">包名</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.pkg" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">VUE路径</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.vueOutputDir" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="flex-item">
            <div class="flex-item-title">表前缀</div>
            <div class="flex-item-content">
              <el-input v-model="generateObj.tablePrefix" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top:40px;">
        <el-checkbox @change="allCheckChange" v-model="isAllCheckBox">全选</el-checkbox>
        <el-checkbox @change="singCheckChange" style="margin-left:20px" v-model="generateObj.controllerEnable">
          生成controller
        </el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.entityEnable">生成实体</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.mapperEnable">生成mapper</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.serviceEnable">生成service</el-checkbox>
      </div>
      <div style="margin-top:40px;">
        <el-checkbox @change="allVueCheckChange" v-model="isAllVueCheckBox">全选</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.vueEnable">生成list.vue</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.vueDataJsEnable">生成data.js</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.vueLocalJsEnable">生成local.js(多语言)</el-checkbox>
        <el-checkbox @change="singCheckChange" v-model="generateObj.vueServiceJsEnable">生成service.js(接口调用)</el-checkbox>
      </div>
      <div style="margin-top:40px;">
        <el-checkbox v-model="generateObj.createMenu">是否生成菜单(如果生成菜单,请选择上级菜单,输入菜单名称)</el-checkbox>
        <el-input v-model="generateObj.menuName" placeholder="菜单名称"></el-input>
        <el-select v-model="generateObj.parentMenuId" placeholder="上级菜单ID">
          <el-option
            v-for="item in menu"
            :key="item.menu.id"
            :label="item.menu.name"
            :value="item.menu.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 后台表的数据 -->
    <div class="zn-wrapper-center">
      <div class="top-area filter-container">
        <el-input v-model="keywords" size="small" placeholder="请输入内容" style="width: 200px;" class="filter-item"
                  @keyup.enter.native="searchClick"/>
        <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="searchClick">
          搜索
        </el-button>
        <el-button type="primary" size="small" @click="createCode">
          生成代码
        </el-button>
      </div>
      <el-table ref="multipleTable" :data="generateObj.tables"
                border style="width: 100%;max-height:490px;overflow-y:auto"
                @selection-change="handleSelectionChange"
                class="bill-table">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="tableName"
          label="表名">
        </el-table-column>
        <el-table-column
          prop="comment"
          label="表注释">
        </el-table-column>
      </el-table>
    </div>
    <!-- 生成代码的按钮 -->
    <div class="zn-add-footer">
      <el-button type="primary" size="small" @click="createCode">生成代码</el-button>
    </div>
  </div>
</template>

<script>
  import {commitGerenate, getGenerateInfor, getTableInfor, listByParentId} from "@/api/code.service";

  export default {
    name: 'generate',
    data() {
      return {
        menu: [],
        //生成代码对象
        generateObj: {
          controllerEnable: true,
        },
        //是否全选标示
        isAllCheckBox: false,
        isAllVueCheckBox: false,
        //被选中的表
        multipleSelection: [],
        keywords: ''

      }
    },
    mounted() {
      this.queryGenerateDate();
      listByParentId().then(res => {
        this.menu = res.value
      })
    },
    methods: {
      //获取生成代码信息
      queryGenerateDate() {
        getGenerateInfor().then((res) => {
          this.generateObj = res.value
          this.singCheckChange()
        })
      },
      //全选点击
      allCheckChange(val) {
        this.generateObj.controllerEnable = val
        this.generateObj.entityEnable = val
        this.generateObj.mapperEnable = val
        this.generateObj.serviceEnable = val
      },
      //页面全选点击
      allVueCheckChange(val) {
        this.generateObj.vueDataJsEnable = val
        this.generateObj.vueLocalJsEnable = val
        this.generateObj.vueServiceJsEnable = val
        this.generateObj.vueEnable = val
      },
      //单选点击
      singCheckChange() {
        //这里面判断生成java代码相关是否全部选中,如果全部选中,则isAllCheckBox = true
        let javaChecked = (this.generateObj.controllerEnable && this.generateObj.entityEnable && this.generateObj.mapperEnable && this.generateObj.serviceEnable)
        if (javaChecked) {
          this.isAllCheckBox = true
        } else {
          this.isAllCheckBox = false
        }
        //判断vue相关是否全部勾选
        let vueChecked = (this.generateObj.vueDataJsEnable && this.generateObj.vueLocalJsEnable && this.generateObj.vueServiceJsEnable && this.generateObj.vueEnable)
        if (vueChecked) {
          this.isAllVueCheckBox = true
        } else {
          this.isAllVueCheckBox = false
        }
      },
      //点击搜索
      searchClick() {
        getTableInfor({keywords: this.keywords}).then((res) => {
          this.generateObj.tables = res.values
        })
      },
      //checkbox的选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //生成代码
      createCode() {
        console.log(this.multipleSelection)
        console.log(this.generateObj)
        //深拷贝对象
        let params = JSON.parse(JSON.stringify(this.generateObj))
        let tableNames = []
        let tables = []
        this.multipleSelection.map((item) => {
          tableNames.push(item.tableName)
          tables.push(item)
        })
        params.tableNames = tableNames
        params.tables = tables
        commitGerenate(params).then((res) => {
          this.$message({type: "success", message: "生成成功"})
        })
      }

    }
  }
</script>

<style scoped>
  .el-input {
    width: 200px;
  }
  .flex-item {
    display: flex;
    align-items: center;
  }

  .flex-item-title {
    width: 80px;
    text-align: left;
    font-size: 12px;
  }

  .flex-item-content {
    flex: 1;
    display: flex;
  }

  .zn-wrapper-center {
    margin-top: 30px;
  }

  .zn-add-footer {
    margin-top: 20px;
  }
</style>
<style>
  .zn-wrapper .el-col {
    padding: 5px;
    border: 1px solid #f1f1f1;
  }

  .zn-wrapper .el-row {
    margin-top: 20px;
  }

  .el-table {

  }
</style>




